<!--
 * @Description: 
 * @Version: 
 * @Author: GabbyMrH
 * @Email: gabbymrh@gmail.com
 * @Date: 2021-01-04 09:38:10
 * @LastEditors: GabbyMrH
 * @LastEditTime: 2021-01-05 11:34:51
-->
<template>
  <view class="header">
    <view class="layout">
    <view class="content">
      <!--头像-->
      <view class="src_img">
        <u-avatar :src="src"></u-avatar>
      </view>
      <!--名称等级-->
      <view class="name_level">
        <view class="name_level_top">
          <view class="name_level_top_right">
            <text>蠡商汇会员</text>
          </view>
          <view class="name_level_top_left">
            <label>2</label>
          </view>
        </view>
        <view class="name_level_bottom">
          <text>ID:28793622</text>
          <text class="left">贡献值: 265/1000</text>
        </view>
      </view>
    </view>
      <!--按钮-->
      <view class="gocenter">
        <view class="btn" @click="gocenter"> 
            <text>分会长管理中心</text>
            <u-icon name='arrow-right' color='#5a2902' size="18"></u-icon>
        </view>
      </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
@Component({ name: "header" })
export default class extends Vue {
  @Prop() private src!: string;

  @Emit("gocenter")
  private gocenter() {}
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 260upx;
  background: #f37d0a;
  background-image: url("https://7869-xiaolidaodian-d15qm-1302750752.tcb.qcloud.la/lsh_home/mine_img_background.jpg?sign=1b08d3c24dbe95aa6d032c2bd860680e&t=1609730606");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .layout {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    .content {
      width: 100%;
      height: 133upx;
      display: flex;
      justify-content: flex-start;
      .src_img {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30upx;
      }
      .name_level {
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 3%;
        .name_level_top {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          .name_level_top_right {
            font-size: 32upx;
            line-height: 70upx;
            color: #ffffff;
          }
          .name_level_top_left {
            width: 48upx;
            height: 26upx;
            background-image: url("https://7869-xiaolidaodian-d15qm-1302750752.tcb.qcloud.la/lsh_home/mine_ic_vip.png?sign=48f8d212be0614ceb9438c9835281781&t=1609731755");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 10upx;
            margin-top: 20upx;
            position: relative;
            label {
              font-size: 18upx;
              color: #e92311;
              margin-left: 29upx;
              position: absolute;
              margin-top: 4%;
              font-style: italic;
            }
          }
        }
        .name_level_bottom {
          font-size: 20upx;
          color: #ffffff;
          display: flex;
          justify-content: flex-start;
          .left {
            margin-left: 20upx;
          }
        }
      }
    }
    .gocenter {
      display: flex;
      flex-flow: row;
      justify-content: flex-end;
      align-items: center;
      right: 0;
      .btn {
        width: 160upx;
        height: 34upx;
        background-color: #ffe5ab;
        border-radius: 17upx 0 0 17upx;
        display: flex;
        align-items: center;
        margin-top: 15%;
        text {
          font-size: 18upx;
          color: #5a2902;
          margin-left: 14upx;
        }
      }
    }
  }
}
</style>